<template>
	<div class="tool-title-box">
		<h3>视频设置</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">视频地址</div>
				<div class="modify-box w100">
					<el-input type="textarea" v-model="activeComponent.data.url" autosize clearable placeholder="请输入内容"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">自动播放</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.autoplay" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">循环播放</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.loop" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<tool-select v-model:checked="activeComponent.data.positionValue" title="图文位置" :options="positions"></tool-select>
			<tool-single-img v-model:imageUrl="activeComponent.data.poster" tip="建议尺寸: 16 : 9等比例图片, 高度自适应"></tool-single-img>
			<div class="item-box">
				<tool-wang-editor v-model="activeComponent.data.content" :is-disable="false"></tool-wang-editor>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { useStore } from '/@/store/index';
	
	import ToolSelect from '/@/views/decorator/components/toolBar/module/tool-select.vue';
	import ToolSingleImg from '/@/views/decorator/components/toolBar/module/tool-single-img.vue';
	import ToolWangEditor from '/@/views/decorator/components/toolBar/module/tool-wang-editor.vue';
	export default {
		name: 'video-tool',
		components: {
			ToolSelect,
			ToolSingleImg,
			ToolWangEditor
		},
		setup() {
			const store = useStore();
			const state = reactive({
				positions: [
					{
						value: "top",
						label: "上图下文"
					},
					{
						value: "bottom",
						label: "下图上文"
					}
				],
			});
			
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			return {
				...toRefs(state)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '../basics/scss/index.scss';
</style>
